<template>
  <div id="login" class="main" :style="{background:'url('+img.url+')',backgroundSize:'100% 100%',}">
    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset',fontSize: '2rem',height:'80px',marginTop:'10px',paddingTop:'5px' }"
        @change="handleTabClick">
        <a-tab-pane key="tab1" :tab="$t('login.userLoginTitle')"  >
          <a-form-item  >
            <a-input
              size="large"
              v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules}]"
              type="text"
              :placeholder="$t('login.userNamePlaceholder')" >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
          <span class="logintext" ></span>
          <a-form-item>
            <a-input
              v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules}]"
              size="large"
              type="password"
              autocomplete="false"
              :placeholder="$t('login.passwordPlaceholder')">
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
          <span class="logintext" ></span>
        </a-tab-pane>

      </a-tabs>
      <a-form-item >
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="loginBtn"
          @click.stop.prevent="handleSubmit"
          :disabled="loginBtn"
          :style="{ fontSize: '18px'}"
        >{{$t('login.loginBtn')}}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
    import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
    import { mapActions } from "vuex"
    import { timeFix } from "@/utils/util"
    import Vue from 'vue'
    import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
    import {getEncryptedString } from '@/utils/encryption/aesEncrypt'
    import { USER_INFO } from "@/store/mutation-types"
    import ACol from "ant-design-vue/es/grid/Col";
    export default {
        components: {
          ACol,
          TwoStepCaptcha
        },
        data () {
            return {
                img:{
                    url:require("@/assets/main.png"),
                    name: 'bg'
                },
                langCode:'zh-CN',
                customActiveKey: "tab1",
                loginBtn: false,
                loginType: 0,
                requiredTwoStepCaptcha: false,
                stepCaptchaVisible: false,
                form: this.$form.createForm(this),
                encryptedString:{
                    key:"",
                    iv:"",
                },
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                validatorRules:{
                    username:{rules: [{ required: true, message: '请输入用户名!'}]},
                    password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]},
                },
                verifiedCode:"",
                inputCodeContent:"",
                inputCodeNull:true,
                departList:[],
                departVisible:false,
                departSelected:"",
                currentUsername:"",
                validate_status:"",
                currdatetime:'',
                randCodeImage:'',
                requestCodeSuccess:false
            }
        },
        created () {
            Vue.ls.remove(ACCESS_TOKEN)
            this.getRouterData();
        },
        methods: {
            ...mapActions([ "Login", "Logout","PhoneLogin","ThirdLogin" ]),
            langCodeChange(){
                this.$i18n.locale = this.langCode; //改变当前语言
                Vue.ls.set("language", this.langCode);//将lang 语言存在localStorage里，main里面就会根据属性值进行判断 locale: Vue.ls.get("language", "zh-CN")
            },
            handleTabClick (key) {
                this.customActiveKey = key
            },
            handleSubmit () {
                let that = this
                let loginParams = {};
                that.loginBtn = true;
                // 使用账户密码登陆
                if (that.customActiveKey === 'tab1') {
                    that.form.validateFields([ 'username', 'password' ], { force: true }, (err, values) => {
                        if (!err) {
                            loginParams.username = values.username
                            loginParams.password = values.password
                            loginParams.langCode='zh-CN';
                            that.Login(loginParams).then((res) => {
                                this.departConfirm(res)
                            }).catch((err) => {
                                that.requestFailed(err);
                            });
                        }else {
                            that.loginBtn = false;
                        }
                    })
                }
            },
            loginSuccess () {
                var userInfo=Vue.ls.get(USER_INFO);
                this.$i18n.locale = 'zh-CN'; //改变当前语言
                Vue.ls.set("language", 'zh-CN');//将lang 语言存在localStorage里，main里面就会根据属性值进行判断 locale: Vue.ls.get("language", "zh-CN")
                //  moment.locale(this.langCode);
                this.$router.push({ path: "/main/GlrMain" });
            },
            departConfirm(res){
                if(res.success){
                    let multi_depart = res.result.multi_depart
                    //0:无部门 1:一个部门 2:多个部门
                    if(multi_depart==0){
                        this.loginSuccess()
                        this.$notification.warn({
                            message: '提示',
                            description: `您尚未归属部门,请确认账号信息`,
                            duration:3
                        });
                    }else if(multi_depart==2){
                        this.departVisible=true
                        this.currentUsername=this.form.getFieldValue("username")
                        this.departList = res.result.departs
                    }else {
                        this.loginSuccess()
                    }
                }else{
                    this.requestFailed(res)
                    this.Logout();
                }
            },
            stepCaptchaSuccess () {
                this.loginSuccess()
            },
            stepCaptchaCancel () {
                this.Logout().then(() => {
                    this.loginBtn = false
                    this.stepCaptchaVisible = false
                })
            },
            requestFailed (err) {
                this.$notification[ 'error' ]({
                    message: '登录失败',
                    description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
                    duration: 4,
                });
                this.loginBtn = false;
            },
            generateCode(value){
                this.verifiedCode = value.toLowerCase()
            },
            inputCodeChange(e){
                this.inputCodeContent = e.target.value
            },
            departChange(value){
                this.validate_status='success'
                this.departSelected = value
            },
            getRouterData(){
                this.$nextTick(() => {
                    if (this.$route.params.username) {
                        this.form.setFieldsValue({
                            'username': this.$route.params.username
                        });
                    }
                })
            },
            //获取密码加密规则
            getEncrypte(){
                var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
                if(encryptedString == null){
                    getEncryptedString().then((data) => {
                        this.encryptedString = data
                    });
                }else{
                    this.encryptedString = encryptedString;
                }
            },
        }
    }
</script>

<style lang="less" scoped>
  #login .logintext{
    height: 20px;
  }
  /*记住密码文本框*/
  #login /deep/ .ant-checkbox-inner{
    background-color: transparent;
    border: 1px solid #0195ff;
  }
  /*
    #login /deep/ .ant-input-lg{
      background-color: black !important;
    }
  */
  #login /deep/ .anticon svg {
    color: #9ea2ab;
  }

  /*用户名-密码框*/


  #login /deep/ .ant-tabs {

    margin: 0 auto;
  }

  #login /deep/ .ant-input-lg {
    height: 45px;
    border: 1px solid #0f81ca;
  }

  /*用户登录下划线*/
  #login /deep/ .ant-tabs-ink-bar {

    height: 0;
  }

  /*用户登录*/
  #login /deep/ .ant-tabs-nav .ant-tabs-tab {
    font-size: 1.8rem;
    color: #d2daea;
  }

  /*用户登录界面内容*/
  #login /deep/ .ant-form{
    margin: 0 auto;
    width: 80%;
  }

  /*行间距*/
  /*
 #login /deep/ .ant-row{
   height: 40px;
 }*/
  .main {
    min-width: 260px;
    width: 400px;
    margin: 0 auto;
    margin-top: 30px;
    box-shadow: 0 0 100px #cfd6e5;
    height: 380px;
    align-items: center;
    opacity: 0.98;

  }
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      font-size: 16px;
      height: 45px;
      line-height: 45px;
      width: 100%;
      background-image: linear-gradient(#0195ff, #0062fe);
      border:none;

    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0,0,0,.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color .3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }

</style>
<style>

  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>